<template>
  <div>
    <div class="note-section">
      <div class="note-section-title grey">字词</div>
      <div class="note-ref">{{ context.content }}</div>
    </div>
    <note-section :kind="NoteKind.Phonetics" :notes="notes" @add-note="addNote"></note-section>
    <note-section :kind="NoteKind.Lecture" :notes="notes" @add-note="addNote"></note-section>
    <note-section :kind="NoteKind.Note" :notes="notes" @add-note="addNote"></note-section>
    <note-section :kind="NoteKind.Link" :notes="notes" @add-note="addNote"></note-section>
    <div class="note-section">
      <div class="note-section-title">
        参考
        <ri class="right" i="add" @click="addNote(NoteKind.Link)"></ri>
      </div>
      <div class="note-list">
        <word-ref :ch="context.content"></word-ref>
      </div>
    </div>
     <div class="note-editor-pane" v-show="isShowEditor">
      <note-editor :context="context" :value="note" @close="isShowEditor=false"></note-editor>
    </div>
  </div>
</template>

<script>
import { NoteKind } from "@/js/constants.js";
import { NoteScope } from '../../js/constants';
import NoteEditor from "./editors/NoteEditor.vue";
import WordRef from "./WordRef.vue";
import NoteSection from "./NoteSection.vue";

export default {
  components: {
    NoteEditor,
    WordRef,
    NoteSection
  },
  props: ["context"],
  data() {
    return {
      NoteKind: NoteKind,
      NoteScope: NoteScope,
      isShowEditor: true,
      isFav: false,
      editorText: "",
      note: {
        content: "",
      },
      notes: [],
    };
  },
  computed: {
    nType() {
      let typeMap = {
        note: 1,
        phonetics: 2,
        reference: 3,
      };
      if (this.noteType in typeMap) {
        return typeMap[this.noteType];
      } else {
        return 1; // 默认是普通笔记
      }
    },
  },
  created() {
    //this.loadNotes();
  },
  watch: {
    'context.content': {
      handler() {
        if (this.context.scope != NoteScope.Word) return;
        this.loadNotes();
      }
    }
  },
  methods: {
    addFav() {},
    removeFav() {},
    cancel() {
      this.editorText = "";
    },
    editNote() {
      this.editorText = this.note.content;
    },
    addPinyin() {
      this.noteType = "phonetics";
    },
    addNote(kind) {
      console.log("kind chagned:", kind)
      this.$emit("update-context", { kind: kind });
      this.isShowEditor = true;
    },
    addReference() {
      this.noteType = "reference";
    },
    savePinyin(word) {
      console.log("saving pinyin:", JSON.stringify(word));
      let note = {
        content: word.pinyin,
        colid: this.where.colid,
        artid: this.where.artid,
        paraid: this.selection.location.paraid,
        sentid: this.selection.location.sentid,
        startpos: word.spos,
        endpos: word.epos,
      };
      this.postNote(note);
    },
    postNote(note) {
      let url = "/api/v1/note/add";
      return this.authPost(url, note)
        .then((res) => {
          let noteid = res.data.id;
          note.id = noteid;
          //self.notes[noteid] = note;
          //EVENT_BUS.$emit("NOTE_ADDED", note);
          //this.$store.dispatch("addNote", note);
          this.loadNotes();
          return note;
        })
        .catch((error) => {
          console.log(error);
          throw error;
        });
    },
    saveNote() {
      let note = this.note;
      var url = "";
      if ("id" in note) {
        // modify
        note.content = this.editorText;
        url = "/api/v1/note/modify";
      } else {
        let sel = this.selection;
        let ptype = 1; // 句子
        let spos = 0;
        let epos = 0;
        if (sel.type == "word") {
          ptype = 0; // 字词
          spos = sel.location.startpos;
          epos = sel.location.endpos;
        }
        // create
        note = {
          ntype: this.nType, // note
          ptype: ptype,
          colid: this.where.colid,
          artid: this.where.artid,
          paraid: this.selection.location.paraid,
          sentid: this.selection.location.sentid,
          startpos: spos,
          endpos: epos,
          content: this.editorText,
        };
        url = "/api/v1/note/add";
      }

      console.log("saving note:", note);
      return this.authPost(url, note)
        .then((res) => {
          let noteid = res.data.id;
          note.id = noteid;
          //self.notes[noteid] = note;
          //EVENT_BUS.$emit("NOTE_ADDED", note);
          //this.$store.dispatch("addNote", note);
          this.loadNotes();
          return note;
        })
        .catch((error) => {
          console.log(error);
          throw error;
        });
    },
    loadNotes() {
      this.authGet( "/api/v1/note/list/cards?mid=" + this.context.mat.id
        + "&scope=" + NoteScope.Word
        + "&line=" + Number(this.context.line)
        + "&spos=" + this.context.spos
        + "&epos=" + this.context.epos)
        .then((res) => {
          this.notes = res.data;
        })
        .catch((e) => console.log(e));
    },
    noteRemoved(note) {
      this.notes = this.notes.filter((n) => n.id != note.id);
    },
  },
};
</script>